<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>系统管理</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<style type="text/css">
			body{background:white;color: black;}
			.h600{height:600px;}
			.o-h{overflow:hidden;}
			.mt20{margin-top:20px;}
			.list-unstyled a{
			text-decoration:none;}
			.gl a{
			text-decoration:none;}
			.gl a:hover{
			border-bottom: 2px solid #ff555d;}
			ul {
				list-style: none;
			}
			.myfix{
				position:fixed;
			}
			.wrap{
				background: white;
				color:black;
				padding:0;
			}
			.nav{
				width:170px;
				color:black;
				z-index: 20;
			}
			.logo{
				width: 4vw;
				height: auto;
				padding: 20px 0 10px 0;
			}
			.nav h2{
				color:black; font-size:16px; margin:0px 20px 60px;
				font-weight: bold;
			}
			
			.nav h2 span{
				color: black;
			}
			.nav li{
				line-height: 50px;
				padding-left:30px;
			}
			.nav li a span{
				margin-right: 30px;
			}
			.nav li.current{
				border-bottom: 2px solid #ff555d;
			}
			.nav li:hover{
				border-bottom: 2px solid #ff555d;
			}
			.nav li.current a{
				color:black;
				font-weight: bold;
			}
			.nav a{color:black;}
			.content,.bg-side{
				padding:0;
			}
			.top{
				background: #fff;
				line-height: 70px;
			}
			section{
				padding-top:80px;
				margin-left:170px;
				padding-bottom:200px;
				min-height: 600px;
			}
			section .row{
				margin-left:10px;
			}
			section h3{
				border-bottom:1px solid #ddd; padding:10px;
			}
			.b-r{
				border:1px solid #ddd;
				border-radius:10px;
			}
			.col-md-5{
				margin:0 20px;
			}
			#mess_list li p{
				width:90%;
				cursor:pointer; 
				overflow: hidden; 
				white-space: nowrap; 
				text-overflow: ellipsis;
			}
			.gl a{
				color: black;
			}
			.gl ul{
				display: flex;
				font-size: 20px;
			}
			.gl ul li{
				margin-right: 10px;
				padding: 10px;
				border-radius: 5px 5px 0 0;
			}
			.gl ul .active{
				background:#444444;
			}
			.gl ul .active a{
				background:#444444;
				color: white;
			}
			#link2{
				position: relative;
			}
			.pst{
				position: absolute;
				top:140px;
				width: 100%;
			}
			#link2_2{
				display: none;
			}
			#link2_3{
				display: none;
			}
		</style>
		<script src="js/fd_to_json.js"></script> 
		<script>
				
			function updatelists_ac(){
				//此函数用于从文章表中取出所有记录进行显示

				var json_Data='{"list-data":"article"}';
            	var xhr=new XMLHttpRequest();
            	xhr.open("POST","php/query.php",true);
            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
            	xhr.send(json_Data);
            	xhr.onreadystatechange=function(){
            		if(xhr.readyState==4){
            			s=JSON.parse(xhr.responseText);
            			if(s.code==0){
            				$("#article").html("<li>"+s.mes+"</li>");
            			}
            			else{
            				str="";
            				$.each(s.data,function(i,value){
            					str_span="<span class='glyphicon glyphicon-trash pull-right deluser_ac'></span>";
            					str+="<li><span class='hidden'>"+value.article_id+"</span><span>"+value.title+"</span>"+str_span+"</li>";
            				})
            				$("#article").html(str);
							$(".deluser_ac").css("cursor","pointer").click(function(){
            					deluser_ac($(this).parent().find("span").eq(0).html());
            				});
						}
					}
				}
			}
			function deluser_ac(id){
				//此函数用于根据article表article_id删除管理员
					var json_Data='{"article_id":'+id+'}';
	            	var xhr=new XMLHttpRequest();
	            	xhr.open("POST","php/del_article.php",true);
	            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
	            	xhr.send(json_Data);
	            	xhr.onreadystatechange=function(){
	            		if(xhr.readyState==4){
	            			s=JSON.parse(xhr.responseText);
	            			alert(s.info);
	            			updatelists_ac();
	            		}
	            	}
			}
			function deluser(id,uname){
				//此函数用于根据管理员id删除管理员
				if(uname==localStorage.username){
					alert("不能删除当前操作人员！");
				}
				else{
					var json_Data='{"uid":'+id+'}';
	            	var xhr=new XMLHttpRequest();
	            	xhr.open("POST","php/del_user.php",true);
	            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
	            	xhr.send(json_Data);
	            	xhr.onreadystatechange=function(){
	            		if(xhr.readyState==4){
	            			s=JSON.parse(xhr.responseText);
	            			alert(s.info);
	            			updatelists_gly();
	            		}
	            	}
				}	
			}
			function updatelists_gly(){
				//此函数用于从管理员表中取出所有记录进行显示

				var json_Data='{"list-data":"gly"}';
            	var xhr=new XMLHttpRequest();
            	xhr.open("POST","php/query.php",true);
            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
            	xhr.send(json_Data);
            	xhr.onreadystatechange=function(){
            		if(xhr.readyState==4){
            			s=JSON.parse(xhr.responseText);
            			if(s.code==0){
            				$("#glys").html("<li>"+s.mes+"</li>");
            			}
            			else{
            				str="";
            				$.each(s.data,function(i,value){
            					str_span="<span class='glyphicon glyphicon-trash pull-right deluser'></span>";
            					str+="<li><span class='hidden'>"+value.id+"</span><span>"+value.username+"</span>"+str_span+"</li>";
            				})
            				$("#glys").html(str);
            				$(".deluser").css("cursor","pointer").click(function(){
            					deluser($(this).parent().find("span").eq(0).html(),$(this).parent().find("span").eq(1).html());
            				});
            				
            			}
            		}
            	}
			}
			function deluser_img(id){
				//此函数用于根据image表img_id删除管理员
					var json_Data='{"img_id":'+id+'}';
	            	var xhr=new XMLHttpRequest();
	            	xhr.open("POST","php/del_image.php",true);
	            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
	            	xhr.send(json_Data);
	            	xhr.onreadystatechange=function(){
	            		if(xhr.readyState==4){
	            			s=JSON.parse(xhr.responseText);
	            			alert(s.info);
	            			updatelists_img();
	            		}
	            	}
			}
			function updatelists_img(){
				//此函数用于从images表中取出所有记录进行显示
				var json_Data='{"list-data":"images"}';
            	var xhr=new XMLHttpRequest();
            	xhr.open("POST","php/query.php",true);
            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
            	xhr.send(json_Data);
            	xhr.onreadystatechange=function(){
            		if(xhr.readyState==4){
            			s=JSON.parse(xhr.responseText);
            			if(s.code==0){
            				$("#images").html("<li>"+s.mes+"</li>");
            			}
            			else{
            				str="";
            				$.each(s.data,function(i,value){
            					str_span="<span class='glyphicon glyphicon-trash pull-right deluser_img'></span>";
            					str+="<li><span class='hidden'>"+value.img_id+"</span><span>"+value.imagename+"</span>"+str_span+"</li>";
            				})
            				$("#images").html(str);
							$(".deluser_img").css("cursor","pointer").click(function(){
            					deluser_img($(this).parent().find("span").eq(0).html());
            				});
            			}
            		}
            	}
			}
			function updatelists_mv(){
				//此函数用于从movies表中取出所有记录进行显示
				var json_Data='{"list-data":"movies"}';
            	var xhr=new XMLHttpRequest();
            	xhr.open("POST","php/query.php",true);
            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
            	xhr.send(json_Data);
            	xhr.onreadystatechange=function(){
            		if(xhr.readyState==4){
            			s=JSON.parse(xhr.responseText);
            			if(s.code==0){
            				$("#movies").html("<li>"+s.mes+"</li>");
            			}
            			else{
            				str="";
            				$.each(s.data,function(i,value){
            					str+="<li>"+value.moviename+"</li>";
            				})
            				$("#movies").html(str);
            			}
            		}
            	}
			}
			
			function logout(){
				//管理员退出时清除本地存储，并重新加载页面，跳转到登录页
				localStorage.username="";
				location.reload();
			}
			function cgpswd(){
				//此函数用于修改密码，可以自己改为跳转到修改页，或弹出一个修改界面
				pswd1=prompt("请输入新密码");
				if(pswd1.length<5){
					alert("密码应大于5位！")
				}
				else{
					pswd2=prompt("请再次输入新密码");
					if(pswd1!=pswd2){
						alert("两次密码不一致！");
					}
					else{
						formData=new FormData();
						formData.append("uname",localStorage.username);
						formData.append("upswd",pswd1);
						var json_Data = convert_FormData_to_json(formData);
		            	var xhr=new XMLHttpRequest();
		            	xhr.open("POST","php/update_user.php",true);
		            	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
		            	xhr.send(json_Data);
		            	xhr.onreadystatechange=function(){
		            		if(xhr.readyState==4){
		            			s=JSON.parse(xhr.responseText);
		            			alert(s.info);
		            			//alert(xhr.responseText);
		            		}
		            	}
					}
				}
			}
			$(function(){
				//页面加载时，先判断管理员是否已登录，如果未登录就跳转到登录页
				if(!!localStorage.username){
					str_logout="<a href='javascript:;' onclick='cgpswd()'> 修改密码  </a><a href='javascript:;' onclick='logout()'> 退出  </a>"
					$("#user").html("欢迎您，"+localStorage.username+str_logout);
				}
				else{
					location.href="login.html";
				}
				$(".nav a").click(function(){
					$(".nav li").removeClass("current");
					$(this).parent().addClass("current");
				})
				$(".gl a").click(function(){
					$(".gl li").removeClass("active");
					$(this).parent().addClass("active");
					$("#link2 .pst").hide();
					$("#link2 .pst").eq($(this).index(".gl a")).show();
				})
				
				updatelists_ac();
				updatelists_img();
				updatelists_mv();
				updatelists_gly();
				var oImg=$("#pre_img")[0];
				var fr;
				$("#upfile_a #upfile_m").change(function(){
					fr=new FileReader();
                	fr.readAsDataURL($("#upfile_a #upfile_m")[0].files[0]);
                	fr.onload=function(){
                		oImg.src=fr.result;
                	}
				})
				$("#newacbtn").click(function(){
					//用于添加文章内容
					var fr=new FileReader();
                    fr.readAsDataURL($("#upfile_a")[0].files[0]);
                    fr.onload=function(){
                    	formData=new FormData();
                    	formData.append("title",$("#title").val());
                    	formData.append("content",$("#content").val());
                    	formData.append("upfile_a",fr.result);
                    	var json_Data = convert_FormData_to_json(formData);
                    	var xhr=new XMLHttpRequest();
                    	xhr.open("POST","php/new_article.php",true);
                    	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                    	xhr.send(json_Data);
                    	xhr.onreadystatechange=function(){
                    		if(xhr.readyState==4){
                    			s=JSON.parse(xhr.responseText);
                    			alert(s.info);
                    			updatelists_ac();   
                    			$("#title").val("");
                    			$("#content").val("");
                    		}
                    	}
					}
				});
				$("#newimgbtn").click(function(){
					//用于添加图片内容
                    	formData=new FormData();
                    	formData.append("imagename",$("#imagename").val());
                    	formData.append("img_src",$("#img_src").val());
                    	formData.append("category",$("#img_cg").val());
                    	var json_Data = convert_FormData_to_json(formData);
                    	var xhr=new XMLHttpRequest();
                    	xhr.open("POST","php/new_image.php",true);
                    	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                    	xhr.send(json_Data);
                    	xhr.onreadystatechange=function(){
                    		if(xhr.readyState==4){
                    			s=JSON.parse(xhr.responseText);
                    			alert(s.info);
                    			updatelists_img();    
                    			$("#imagename").val("");
								$("#img_src").val("");
								$("#img_cg").val("");
                    		}
                    	}
				});
				$("#newmvbtn").click(function(){
					//用于添加mv内容
					var fr=new FileReader();
					fr.readAsDataURL($("#upfile_m")[0].files[0]);
                    fr.onload=function(){
                    	formData=new FormData();
                    	formData.append("moviename",$("#moviename").val());
						formData.append("upfile_m",fr.result);
                    	var json_Data = convert_FormData_to_json(formData);
                    	var xhr=new XMLHttpRequest();
                    	xhr.open("POST","php/new_movie.php",true);
                    	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                    	xhr.send(json_Data);
                    	xhr.onreadystatechange=function(){
                    		if(xhr.readyState==4){
                    			s=JSON.parse(xhr.responseText);
                    			alert(s.info);
                    			updatelists_mv();  
                    			$("#moviename").val("");
                    		}
                    	}
					}
				});
				$("#newglybtn").click(function(){
					//用于添加管理员
				    formData=new FormData();
                	formData.append("uname",$("#newglynm").val());
                	formData.append("upswd",$("#newglypw").val());
                	var json_Data = convert_FormData_to_json(formData);
                	var xhr=new XMLHttpRequest();
                	xhr.open("POST","php/new_user.php",true);
                	xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                    xhr.send(json_Data);
                	xhr.onreadystatechange=function(){
                		if(xhr.readyState==4){
                			s=JSON.parse(xhr.responseText);
                			alert(s.info);
                			updatelists_gly(); 
                			$("#newglynm").val("");
                		}
                	}
				})
			})
		</script>
	</head>
	<body>
		<div class="container h600 o-h mt20 wrap">
			<div class="nav myfix h600">
				<img class="logo center-block" src="images/APP-logo.png" />
				<h2>摄区后台管理系统</h2>
				<ul class="list-unstyled">
					<li class="current"><a href="#link1"><span class="glyphicon glyphicon-user"></span>人员管理</a></li>
					<li><a href="#link2"><span class="
glyphicon glyphicon-list-alt"></span>内容管理</a></li>
				</ul>
			</div>
			<div class="content">
				<div class="top myfix container">
					<p class="text-right"><span id="user"></span>使用帮助</p>
				</div>
				<section id="link1">
					<h3 style="" >人员管理</h3>
					<div class="row">
							<div class="col-md-5 b-r">
								<form style="margin: 10px;" id="newmform_g">
								  <div class="form-group">
								    <label for="newglynm">新用户</label>
								    <input type="text" class="form-control" id="newglynm" name="newglynm">
								  </div>
								  <div class="form-group">
								    <label for="newglypw">密码</label>
								    <input type="text" class="form-control" id="newglypw" name="newglypw">
								  </div>
								  <button type="button" class="btn btn-default" id="newglybtn">保存</button>
								</form>
							</div>
							<div class="col-md-5 b-r">
								<h4>人员列表</h4>
								<ul id="glys">
									
								</ul>
							</div>
						</div>
				</section>
				<section id="link2">
					<div class="gl">
						<ul>
							<li class="active"><a href="#">文章管理</a></li>
							<li><a href="#">图片管理</a></li>
							<li><a href="#">视频管理</a></li>
						</ul>
					</div>
					<div class="row pst" id="link2_1">
							<div class="col-md-5 b-r">
								<form style="margin: 10px;">
								  <div class="form-group">
								    <label for="title">文章标题</label>
								    <input type="text" class="form-control" id="title" name="title">
								  </div>
								  <div class="form-group">
								    <label for="content">文章内容</label>
								    <textarea class="form-control" id="content" name="content"></textarea>
								  </div>
								  <div class="form-group">
								    <label for="upfile_a">上传海报图片</label>
								    <input type="file" id="upfile_a" name="upfile_a">
								    <img src="" width="100" id="pre_img">
								  </div>
								  <button type="button" class="btn btn-default" id="newacbtn">保存</button>
								</form>
							</div>
							<div class="col-md-5 b-r">
								<h4>最新文章</h4>
								<ul id="article">
									
								</ul>
							</div>
						</div>
						<div class="row pst" id="link2_2">
							<div class="col-md-5 b-r">
								<form style="margin: 10px;">
								  <div class="form-group">
								    <label for="imagename">图片标题</label>
								    <input type="text" class="form-control" id="imagename" name="imagename">
								  </div>
								  <div class="form-group">
								    <label for="img_src">图片链接</label>
								    <textarea class="form-control" id="img_src" name="img_src"></textarea>
								  </div>
								  <div class="form-group">
								    <label for="img_cg">图片类别</label>
								    <input type="text" class="form-control" id="img_cg" name="img_cg">
								  </div>
								  <button type="button" class="btn btn-default" id="newimgbtn">保存</button>
								</form>
							</div>
							<div class="col-md-5 b-r">
								<h4>最新图片</h4>
								<ul id="images">
									
								</ul>
							</div>
						</div>
						<div class="row pst" id="link2_3">
							<div class="col-md-5 b-r">
								<form style="margin: 10px;">
								  <div class="form-group">
								    <label for="moviename">视频标题</label>
								    <input type="text" class="form-control" id="moviename" name="moviename">
								  </div>
								  <div class="form-group">
								    <label for="upfile_m">上传视频</label>
								    <input type="file" id="upfile_m" name="upfile_m">
								    <img src="" width="100" id="pre_mv">
								  </div>
								  <button type="button" class="btn btn-default" id="newmvbtn">保存</button>
								</form>
							</div>
							<div class="col-md-5 b-r">
								<h4>最新视频</h4>
								<ul id="movies">
									
								</ul>
							</div>
						</div>
				</section>
			</div>
		</div>
	</body>
</html>
